<template>
  <div class="notification">
    <van-nav-bar title="通知消息" left-arrow @click-left="onClickLeft"/>
    
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="(item, index) in list" :key="index">
        <template #title>
          <div class="notification-item">
            <div class="notification-title">{{ item.title }}</div>
            <div class="notification-time">{{ item.time }}</div>
          </div>
          <div class="notification-content">{{ item.content }}</div>
        </template>
      </van-cell>
    </van-list>

    <tab-bar />
  </div>
</template>

<script>
import TabBar from '@/components/TabBar.vue'

export default {
  name: 'Notification',
  components: {
    TabBar
  },
  data() {
    return {
      loading: false,
      finished: false,
      list: [
        {
          title: '系统通知',
          time: '2024-03-19 10:00',
          content: '您的校园卡已经成功激活'
        },
        {
          title: '交易提醒',
          time: '2024-03-19 09:30',
          content: '您使用校园卡支付了15.00元'
        },
        {
          title: '系统通知',
          time: '2024-03-18 14:20',
          content: '请及时完成身份认证'
        }
      ]
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push('/')
    },
    onLoad() {
      // 模拟加载更多数据
      setTimeout(() => {
        this.loading = false
        this.finished = true
      }, 1000)
    }
  }
}
</script>

<style scoped>
.notification-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.notification-title {
  font-size: 16px;
  font-weight: bold;
}

.notification-time {
  font-size: 12px;
  color: #999;
}

.notification-content {
  font-size: 14px;
  color: #666;
}
</style> 